<template>
  <div style="width:100%;white-space:pre-wrap;">
    <a-row>
      <a-upload
        style="width: 100%; height: 100%;"
        class="avatar-uploader"
        :customRequest="customUpload"
        :multiple="true"
        listType="text"
        :showUploadList="false"
        :remove="remove"
      >
        <div style="width:100%;">
          <a-button style="padding:auto;"> <a-icon type="upload" /> {{btnText}} </a-button>
        </div>
      </a-upload>
    </a-row>
    <a-row v-if="displayList">
      <a-list style="width:100%;white-space:pre-wrap;height:200px;overflow-y: scroll;" itemLayout="horizontal" :data-source="filesShowPathUrl" :key="listsey">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-list-item-meta
            style="width:100%;white-space:pre-wrap;"
            description=""
          >
            <a slot="title" style="width:100%;word-break:break-all;" href="javascript:;" @click="openAtt(item)">{{ item.name }}</a>
            <a-button
              slot="avatar"
              value="small"
              type="link"
              @click="remove(item)">
              删除附件
            </a-button>
          </a-list-item-meta>
        </a-list-item>
      </a-list>
    </a-row>
  </div>
  <!-- <a-upload
    :style="setstyle"
    name="avatar"
    listType="picture-card"
    class="avatar-uploader"
    :showUploadList="false"
    :customRequest="customUpload"
  >
    <img :style="setstyle" v-if="filePathUrl !== ''" :src="imgShowUrl+filePathUrl" alt="" />
    <div v-else>
      <a-icon :type="loading" />
      <div class="ant-upload-text">Upload</div>
    </div>
  </a-upload> -->
</template>

<script>
import { fileUpload } from './upload'
import baseapi from '@/api/base'

export default {
  name: 'FilesUpload',
  props: {
    uploadUrl: {
      default: baseapi.fileUploadUrl,
      required: false,
      type: String
    },
    appId: {
      default: baseapi.huiwcore_app,
      required: false,
      type: String
    },
    idno: {
      default: 'idno',
      required: false,
      type: String
    },
    fileShowUrl: {
      default: baseapi.fileShowUrl,
      required: false,
      type: String
    },
    placeholder: {
      default: '',
      required: false,
      type: String
    },
    btnText:{
      type:String,
      default:'点击上传附件'
    },
    setstyle: {
      default: 'width:50px;max-height:200px;',
      required: false,
      type: String
    },
    // 相关附件内容主键Pid
    attPid: {
      default: '',
      required: false,
      type: String
    },
    displayList:{
      type:Boolean,
      default:true
    },
    value: {
      default: () => [],
      required: false,
      type: Array
    }
  },
  data () {
    return {
      loading: 'plus',
      listsey: 0,
      dictOptions: [],
      uploadHeaders: {},
      filesPathUrl: [],
      filesShowPathUrl: []
    }
  },
  created () {
    // this.initDictData()
  },
  mounted () {
    ++this.listsey
    // console.log('value', this.value)
    this.filesPathUrl = this.value
    // console.log('filesPathUrl', this.filesPathUrl)
    this.filesShowPathUrl = []
    for (let i = 0; i < this.filesPathUrl.length; i++) {
      const tn = {
        uid: this.filesPathUrl[i].attUrl,
        name: this.filesPathUrl[i].attFileName,
        status: 'done',
        url: this.fileShowUrl + this.filesPathUrl[i].attUrl
      }
      this.filesShowPathUrl.push(tn)
    }
  },
  methods: {
    beforeUpload () {
    },
    handleChange (val) {
      this.$emit('change', this.filesPathUrl,val)
      // this.$emit('dataChanged', val)
    },
    customUpload (option) {
      const _this = this
      // const fileUrl = this.uploadUrl
      const formData = new FormData()
      formData.append('appId', _this.appId)
      formData.append('idno', _this.idno)
      formData.append('fileTitle', option.file.name)
      const filename = option.file.name
      const fileType = filename.substring(filename.lastIndexOf('.') + 1, 100)
      formData.append('fileType', fileType)
      formData.append('file', option.file)
      new Promise((resolve) => {
        _this.loading = 'loading'
        resolve(fileUpload(formData, {}))
      }).then((res) => {
        if (res && res.code && res.code === 'C1' && res.data) {
          const tn = {
            uid: res.data.fullUrl,
            name: res.data.fileTitle,
            status: 'done',
            url: _this.fileShowUrl + res.data.fullUrl
          }
          let fileConst = {
            attFileName: res.data.fileTitle,
            attFileType: res.data.fileType,
            attUrl: res.data.fullUrl,
          }
          new Promise((resolve) => {
            resolve(_this.$emit('addAtt', fileConst))
          }).then((resPid) => {
            _this.filesPathUrl.push(fileConst)
            // _this.filesPathUrl.push(Object.assign({ 'pid': resPid }, fileConst))//报错溢出
            _this.filesShowPathUrl.push(tn)
            _this.$emit('change', _this.filesPathUrl,option)
          })
          // _this.filePathUrl = _this.imgShowUrl + res.data.thumbnailUrl
        }
      }).catch(() => {
        // console.log(err)
      }).finally(() => {
        _this.loading = 'plus'
      })
    },
    remove (val) {
      const _this = this
      console.log(val)
      console.log(_this.filesShowPathUrl)
      for (var i = 0; i < _this.filesShowPathUrl.length; i++) {
        if (val.uid === _this.filesShowPathUrl[i].uid) {
          const n = i
          // 删除数据库关联
          _this.$confirm({
            title: '确定移除选中附件?',
            content: '该操作将选中附件,且不可恢复,是否继续删除',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onCancel () {
              // _this.filesShowPathUrl[i].status = 'done'
            },
            onOk () {
              const pid = _this.filesPathUrl[n].pid
              _this.filesShowPathUrl.splice(n, 1)
              _this.filesPathUrl.splice(n, 1)
              _this.$emit('removeAtt', pid)
            }
          })
        }
      }
    },
    openAtt (item) {
      // console.log(item)
      const viewPageURL = item.url
      window.open(viewPageURL + '&fileTitle=' + item.name)
    }
  },
  watch: {
    value: function () {
      ++this.listsey
      // console.log('value2', this.value)
      this.filesPathUrl = this.value
      // console.log('filesPathUrl2', this.filesPathUrl)
      this.filesShowPathUrl = []
      for (let i = 0; i < this.filesPathUrl.length; i++) {
        const tn = {
          uid: this.filesPathUrl[i].attUrl,
          name: this.filesPathUrl[i].attFileName,
          status: 'done',
          url: this.fileShowUrl + this.filesPathUrl[i].attUrl
        }
        this.filesShowPathUrl.push(tn)
      }
      // console.log('filesShowPathUrl', this.filesShowPathUrl)
    }
  }
}
</script>
<style scoped>
</style>
